<script setup>
import { onMounted, ref } from "vue";
import { tree } from "@/api/sys/menu.js";

const value = defineModel()

onMounted(() => {
  loadMenuTree();
});

const props = {
  disabled: {
    type: Boolean,
    default: false
  }
};

const menuTreeData = ref();
const selectProps = {
  label: (data, node) => data.meta.title
};

const loadMenuTree = async () => {
  const { code, data } = await tree();
  if (code) {
    menuTreeData.value = [{
      id: '0',
      meta: {
        title: "顶级菜单"
      },
      children: data
    }];
  }
};
</script>

<template>
  <el-tree-select
    :disabled="props.disabled"
    v-model="value"
    :data="menuTreeData"
    check-strictly
    node-key="id"
    :render-after-expand="false"
    :props="selectProps"
    default-expand-all
  />
</template>

<style scoped lang="scss">

</style>
